<template>
  <div class="channel-edit">
      <!-- 我的频道 -->
      <van-cell :border="false">
        <div slot="title" class="title">我的频道</div>
        <van-button type="danger" plain round size="mini" class="edit-btn" @click="isEdit=!isEdit">{{isEdit?'完成':'编辑'}}</van-button>
      </van-cell>
      <van-grid :column-num="4" :gutter="10" class="my-grid">
        <van-grid-item class="grid-item"  v-for="(channel,index) in myChannels" :key="index" @click="changeRemoveChannel(channel,index)">
          <van-icon v-show="isEdit && !flexChannel.includes(channel.id)" slot="icon" name="clear" ></van-icon>
          <span slot="text" class="text" :class="{active:active===index}">{{channel.name}}</span>
        </van-grid-item>
      </van-grid>
      <!-- 频道推荐 -->
      <van-cell :border="false">
        <div slot="title" class="title">频道推荐</div>
      </van-cell>
      <van-grid  :column-num="4" :gutter="10" class="recommend-grid">
        <van-grid-item 
        class="grid-item"  
        v-for="(channel,index) in recommendChannels" 
        :key="index" 
        :text="channel.name" 
        icon="plus"
        @click="addChannel(channel)"
        >
        </van-grid-item>
      </van-grid>

  </div>
</template>

<script>
import {getChannelsListAPI,addUserChannelAPI,deleteChannelAPI} from '@/api'
import {mapState} from 'vuex'
import {setItem,getItem} from '@/utils/storage'




export default {
  name:"channeledit",
  props:{
    //用户频道
    myChannels:{
      type:Array,
      required:true
    },
    //父组件穿下来的选中状态active
    active:{
      type:Number,
      required:true
    }
  },
  data(){
    return {
      allChannels:[],//所有频道列表
      isEdit:false,//是否显示编辑小图标
      flexChannel:[0],//固定频道,不允许删除
    }
  },
  created(){
    this.getChannels()
  },
  methods:{
    //获取所有频道
    async getChannels(){
      try{
        const {data}=await getChannelsListAPI()
        this.allChannels=data.data.channels
      }catch(err){
        this.$toast('数据获取失败')
      }
    },



    //添加频道
    async addChannel(channel){
      this.myChannels.push(channel)
      //数据持久化处理\
      if(this.user){
        //已登录
        try{
          await addUserChannelAPI({
            id:channel.id,//频道id
            seq:this.myChannels.length  //序号=我的频道列表长度
          })
        }catch(err){
          this.$toast('保存失败,请稍后重试!')
        }
      }else{
        //未登录
        setItem('TOUTIAO_CHANNELS',this.myChannels)

      }

    },



    //切换或者编辑频道
    changeRemoveChannel(channel,index){
      if(this.isEdit){
      //编辑状态 移除频道
        //1固定频道则不删除
        if(this.flexChannel.includes(channel.id)){
          return 
        }
        //2删除频道
        this.myChannels.splice(index,1)
        //3删除位置在当前激活位置前面,激活状态-1
        if(index<=this.active){
        this.$emit('change',this.active-1)
        }
        //处理持久化
        this.deleteChannel(channel.id)
      }else{
        //非编辑状态  切换频道   第三参数控制弹窗是否显示true为显示
        this.$emit('change',index,false)
      }
    },



    // 删除频道持久化
    async deleteChannel(id){
      if(this.user){  //已登录将数据更新到线上
        try{
          await deleteChannelAPI(id)

        }catch(err){
          this.$toast('删除失败,请稍后重试')
        }
      }else{  //未登录,将数据更新到本地
        setItem('TOUTIAO_CHANNELS',this.myChannels)
      }
    }

  },
  computed:{
    ...mapState(['user']),


    //推荐频道=所有平道-用户频道
    recommendChannels () {
      //遍历数组,把满足条件的放入新数组中并返回
      return this.allChannels.filter(channel=>{
        //遍历数组把符合条件的第一个元素返回
        return !this.myChannels.find(mychannel=>mychannel.id===channel.id)
      })
    }
    // recommendChannels () {
    //   const channels=[]
    //   this.allChannels.forEach(channel=>{
    //     //遍历数组 找到满足条件的元素
    //     const res=this.myChannels.find(mychannel=>{
    //       return mychannel.id===channel.id
    //     })
    //     if(!res){
    //       channels.push(channel)
    //     }
    //   })
    //   return channels
    // }
  }

}
</script>

<style scoped lang ="less">
.channel-edit{
  padding: 1.133333rem 0;
  .title{
    font-size: .426667rem;
    color: #333;
  }
  .edit-btn{
    width: 1.386667rem;
    height: .64rem;
    font-size: .346667rem;
    color: #f85959;
    border: .013333rem solid #f85959;
  }
  /deep/.grid-item{
    width: 2.133333rem;
    height: 1.146667rem;
    .van-grid-item__content{
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text,.text{
        margin-top: 0;
        font-size: .373333rem;
      }

    }
  }
  /deep/.recommend-grid{
    .grid-item{
      .van-grid-item__content{
        flex-direction: row;
        .van-icon-plus{
          font-size: .4rem;
          margin-right: .08rem;
        }
        .van-grid-item__text{
          line-height: 1;
        }
      }
    }
  }
  /deep/.my-grid{
    .grid-item{
      .van-icon-clear{
        position: absolute;
        right: -0.133333rem;
        top: -0.133333rem;
        font-size: .4rem;
        color: #cacaca;
        z-index: 2;
      }
      .active{
        color: red;
      }
      .van-grid-item__icon-wrapper{
        position: unset;
      }
    }

  }
    
  
}

</style>